<template>
  <div>
    <Header_h />
    <div class="sq_box_content">
      <div class="assistance sq_xl">
        <img class="assistance_bannder" src="@/assets/web/wq_bg.png" alt="" />
        <div class="container">
          <div class="assistance_banner_h">
            <div class="s_banner">
              <h3 class="sq_tilte1">海外知识产权制度及实务指引</h3>
              <div class="line"></div>
              <!-- <p class="sq_content content_color line_h_26">
                收集整理全球主要国家的知识产权制度及实务操作指南，以国别、制度、操作指引、律师函等要素为基础，建立分类分级检索窗口，宣传和展示海外服务能力，方便企业精准获悉海外制度。
              </p> -->
            </div>
          </div>
          <div class="h_tab s_flex s_align_items_center">
            <div
              class="sq_tilte3 sq_content_color"
              v-for="(item, index) in type"
              :key="index"
              :class="checkIndex == index ? 'sq_active' : ''"
              @click="checkIndex = index"
            >
              <i :class="item.icon"></i>{{ item.name }}
            </div>
          </div>
          <div class="wq_img">
            <div class="wq_img_center">
              <img
                src="@/assets/web/wq_img.png"
                alt=""
                style="cursor: default"
              />
              <div v-if="checkIndex == 0">
                <div
                  style="font-size: 14px"
                  v-for="(item, index) in country"
                  :key="index"
                  :class="`circular_fiexd${index + 1}`"
                  @click="
                    $router.push({
                      path: '/assistance/details',
                      query: {
                        id: item.id,
                        types: checkIndex + 1,
                        name: item.name,
                      },
                    })
                  "
                >
                  <div :class="`circular${index + 1}`">
                    {{ item.name }}
                    <div class="shixin"></div>
                  </div>
                </div>
                <!-- <div class="circular_fiexd2">
                  <div class="circular2 sq_content">
                    欧洲
                    <div class="shixin"></div>
                  </div>
                </div>
                <div class="circular_fiexd3">
                  <div class="circular3 sq_content">
                    日本
                    <div class="shixin"></div>
                  </div>
                </div>
                <div class="circular_fiexd4">
                  <div class="circular4 sq_content">
                    韩国
                    <div class="shixin"></div>
                  </div>
                </div>
                <div class="circular_fiexd5">
                  <div class="circular5 sq_content">
                    泰国
                    <div class="shixin"></div>
                  </div>
                </div>
                <div class="circular_fiexd6">
                  <div class="circular6 sq_content">
                    韩国
                    <div class="shixin"></div>
                  </div>
                </div>
                <div class="circular_fiexd7">
                  <div class="circular7 sq_content">
                    马来西亚
                    <div class="shixin"></div>
                  </div>
                </div>
                <div class="circular_fiexd8">
                  <div class="circular8 sq_content">
                    菲律宾
                    <div class="shixin"></div>
                  </div>
                </div>
                <div class="circular_fiexd9">
                  <div class="circular1 sq_content">
                    印度尼西亚
                    <div class="shixin"></div>
                  </div>
                </div> -->
              </div>
              <div v-if="checkIndex == 1">
                <div
                  v-for="(item, index) in country2"
                  :key="index"
                  :class="`circular_fiexd${index + 1}`"
                  @click="
                    $router.push({
                      path: '/assistance/details',
                      query: {
                        id: item.id,
                        types: checkIndex + 1,
                        name: item.name,
                      },
                    })
                  "
                >
                  <div style="font-size: 14px" :class="`circular${index + 1}`">
                    {{ item.name }}
                    <div class="shixin"></div>
                  </div>
                </div>
              </div>
              <div v-if="checkIndex == 2" class="country3">
                <div
                  v-for="(item, index) in country3"
                  :key="index"
                  :class="`circular_fiexd${index + 1}`"
                  @click="
                    $router.push({
                      path: '/assistance/details',
                      query: {
                        id: item.id,
                        types: checkIndex + 1,
                        name: item.name,
                      },
                    })
                  "
                >
                  <div :class="`circular${index + 1}`" class="sq_content">
                    {{ item.name }}
                    <div class="shixin"></div>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
        <!-- <a href="https://www.wipo.int/portal/zh/index.html" target="_blank" class="wipo">
          <p class="sq_sign_btn3 ">WIPO</p>
        </a> -->
      </div>
      <div class="assistance sq_xs session_top session_top_tab">
        <div class="container">
          <div class="s_banner s_flex s_justify_content_center s_flex-column">
            <h3 class="sq_tilte1">海外知识产权制度及实务指引</h3>
            <p class="line"></p>
            <p class="sq_content content_color line_h_26">
              收集整理全球主要国家的知识产权制度及实务操作指南，以国别、制度、操作指引、律师函等要素为基础，建立分类分级检索窗口，宣传和展示海外服务能力，方便企业精准获悉海外制度。
            </p>
          </div>
          <el-tabs
            style="margin-top: 20px"
            v-model="activeName"
            @tab-click="handleClick"
          >
            <el-tab-pane
              v-for="(item, index) in m_type"
              :key="index"
              :label="item.name"
            >
              <div class="s_flex s_align_items s_flex-wrap">
                <div
                  v-for="(g, i) in country"
                  :key="i"
                  style="width: 33.33%; margin-bottom: 20px"
                >
                  <div>
                    <el-tag
                      effect="dark"
                      size="medium"
                      style="
                        width: 100px;
                        text-align: center;
                        height: 36px;
                        line-height: 36px;
                        background: #fff;
                        color: #ca0010;
                        border: solid 1px #ca0010;
                      "
                      @click="
                        $router.push({
                          path: '/assistance/details',
                          query: {
                            id: item.id,
                            types: checkIndex + 1,
                            name: item.name,
                          },
                        })
                      "
                    >
                      {{ g.name }}
                    </el-tag>
                  </div>
                </div>
              </div>
            </el-tab-pane>
          </el-tabs>
        </div>
      </div>
      <!-- <div class="session_top">
        <div class="container">
          <div class="s_banner s_flex s_justify_content_center s_flex-column">
            <h3 class="sq_tilte1">海外最新政策</h3>
            <p class="line"></p>
          </div>
          <div class="assistance_zc">
            <div
              class="assistance_zc_item"
              v-for="(item, index) in list.list"
              :key="index"
            >
              <div class="s_flex s_align_items s_justify_content_between">
                <h4 class="sq_tilte3 title_color line_h_30 ft_weight_800">
                  {{ item.title }}
                </h4>
                <div
                  class="sq_sign_btn sq_sign_btn3"
                  @click="
                    $router.push({
                      path: '/web/policy/details',
                      query: { id: item.id },
                    })
                  "
                >
                  立即查看 >
                </div>
              </div>
              <p class="sq_content content_color line_h_26">
                {{ item.content }}
              </p>
            </div>
          </div>
        </div>
        <div class="pagination">
          <el-pagination
            background
            small
            @current-change="handleCurrentChange"
            :current-page="list.page"
            :page-size="5"
            layout="total, prev, pager, next, jumper"
            :total="parseInt(list.count)"
            align="left"
            :pager-count="5"
          ></el-pagination>
        </div>
      </div> -->
    </div>
    <Footer />
    <rightMenu @moveTo="moveTo" />
  </div>
</template>

<script>
import Header_h from "@/components/Header_h";
import Footer from "@/components/Footer";
import { lawlist, policylist, consultAdd } from "@/api/web";
import { WebGetCountry } from "@/api/admin";
import rightMenu from "@/components/web/rightMenu";

export default {
  components: {
    Header_h,
    Footer,
    rightMenu,
  },
  data() {
    return {
      list: [],
      checkIndex: 0,
      activeName: 0,
      type: [
        {
          id: 1,
          name: "专利申请及诉讼应对指引",
          icon: "iconfont ",
        },
        {
          id: 2,
          name: "商标申请指引",
          icon: "iconfont ",
        },
        {
          id: 3,
          name: "警告函应对指引",
          icon: "iconfont ",
        },
      ],
      m_type: [
        {
          id: 1,
          name: "专利申请",
          icon: "iconfont ",
        },
        {
          id: 2,
          name: "商标申请",
          icon: "iconfont ",
        },
        {
          id: 3,
          name: "警告函",
          icon: "iconfont ",
        },
      ],
      country: [],
      country2: [],
      country3: [],
    };
  },
  mounted() {
    this.getCountry();
    this.getpolicy();
  },
  methods: {
    //点击第几页
    async handleCurrentChange(currentPage) {
      try {
        this.getpolicy(currentPage);
      } catch (e) {
        this.$message.error(e.message);
      }
    },
    async handleClick() {
      if (this.activeName == 0) {
        this.country = await WebGetCountry();
      } else if (this.activeName == 1) {
        this.country = await WebGetCountry({ type: 2 });
      } else if (this.activeName == 2) {
        this.country = await WebGetCountry({ type: 3 });
      }
    },
    moveTo() {
      window.scrollTo(0, 0);
    },
    async getCountry() {
      this.country = await WebGetCountry();
      this.country2 = await WebGetCountry({ type: 2 });
      this.country3 = await WebGetCountry({ type: 3 });
    },
    // async getList() {
    //   try {
    //     await lawlist();
    //   } catch (error) {
    //     this.$message.error(error.message);
    //   }
    // },
    async handleClose() {
      this.dialogVisible = false;
    },
    async getpolicy(page = 1) {
      try {
        this.list = await policylist({
          page_size: 5,
          page,
        });
        // this.list={...this.list,count:12}
      } catch (error) {
        this.$message.error(error.message);
      }
    },
  },
};
</script>

<style lang="less" scoped>
.assistance {
  position: relative;
  img {
    // width: 100%;
  }
  .wipo {
    position: absolute;
    bottom: 15%;
    left: 50%;
    transform: translateX(-50%);
  }
  .assistance_banner_h {
    position: absolute;
    top: 4%;
    width: 1200px;
    text-align: center;
    p {
      width: 600px;
      margin: 0 auto;
    }
  }
}
.s_banner {
  text-align: center;
  h3 {
    // width: 144px;
    font-weight: 400;
  }
  .line {
    width: 51px;
    height: 2px;
    background: var(--color);
    margin: 30px auto 22px;
    display: inline-block;
  }
}
.assistance_zc {
  width: 1200px;
  background: #ffffff;
  box-shadow: 3px 1px 21px 0px rgba(24, 76, 171, 0.26);
  border-radius: 5px;
  margin-top: 20px;
  padding: 20px 0;
  .assistance_zc_item {
    padding: 30px 0 20px;
    margin: 0 60px 30px;
    border-bottom: 1px solid #f6f6f6;
    &:last-child {
      border: 0;
    }
    p {
      margin-top: 10px;
      width: 85%;
    }
    .assistance_zc_item:last-child {
      margin: 0 60px 0;
    }
  }
}
.h_tab {
  // width: 899px;
  width: 60%;
  height: 59px;
  background: #f8f8f8;
  box-shadow: 0px 0px 21px 0px rgba(44, 103, 255, 0.14);
  border-radius: 30px;
  position: absolute;
  top: 15%;
  left: 50%;
  transform: translateX(-50%);
  cursor: pointer;
  div {
    width: 380px;
    height: 59px;
    line-height: 59px;
    border-radius: 30px;
    text-align: center;
  }
  .sq_active {
    background: #ffffff;
    box-shadow: 0px 0px 21px 0px rgba(44, 103, 255, 0.14);
  }
}
.wq_img {
  cursor: pointer;
}
.wq_img {
  position: absolute;
  top: 25%;
  text-align: center;
  .wq_img_center {
    position: relative;
  }
}
.circular1,
.circular4,
.circular7 {
  width: 80px;
  height: 80px;
  position: relative;
  border: 2px solid #106bf3;
  background-color: #106bf3;
  border-radius: 8px;
  border-radius: 50%;
  color: #fff;
  text-align: center;
  line-height: 80px;
}
.circular1 .shixin,
.circular4 .shixin,
.circular7 .shixin {
  display: inline-block;
  width: 0;
  height: 0;
  border-left: 10px solid transparent;
  border-right: 10px solid transparent;
  border-top: 20px solid #106bf3;
  position: absolute;
  bottom: -20%;
  left: 50%;
  transform: translateX(-50%);
}
.circular2,
.circular5,
.circular8 {
  width: 80px;
  height: 80px;
  position: relative;
  border: 2px solid #7cbb3a;
  background-color: #7cbb3a;
  border-radius: 8px;
  border-radius: 50%;
  color: #fff;
  text-align: center;
  line-height: 80px;
}
.circular2 .shixin,
.circular5 .shixin,
.circular8 .shixin {
  display: inline-block;
  width: 0;
  height: 0;
  border-left: 10px solid transparent;
  border-right: 10px solid transparent;
  border-top: 20px solid #7cbb3a;
  position: absolute;
  bottom: -20%;
  left: 50%;
  transform: translateX(-50%);
}

.circular3,
.circular6,
.circular9 {
  width: 80px;
  height: 80px;
  position: relative;
  border: 2px solid #1fadac;
  background-color: #1fadac;
  border-radius: 8px;
  border-radius: 50%;
  color: #fff;
  text-align: center;
  line-height: 80px;
}
.circular3 .shixin,
.circular6 .shixin,
.circular9 .shixin {
  display: inline-block;
  width: 0;
  height: 0;
  border-left: 10px solid transparent;
  border-right: 10px solid transparent;
  border-top: 20px solid #1fadac;
  position: absolute;
  bottom: -20%;
  left: 50%;
  transform: translateX(-50%);
}
.circular_fiexd1 {
  position: absolute;
  top: 18%;
  left: 72%;
  transition: all 0.5s ease;
  &:hover {
    transform: scale(1.1);
  }
}

.circular_fiexd2 {
  position: absolute;
  top: 8%;
  left: 5%;
  transition: all 0.5s ease;
  &:hover {
    transform: scale(1.1);
  }
}

.circular_fiexd3 {
  position: absolute;
  top: 22%;
  left: 51.5%;
  transition: all 0.5s ease;
  &:hover {
    transform: scale(1.1);
  }
}
.circular_fiexd4 {
  position: absolute;
  top: 20%;
  left: 46.8%;
  transition: all 0.5s ease;
  &:hover {
    transform: scale(1.1);
  }
}

.circular_fiexd4 .circular4 {
  width: 60px;
  height: 60px;
  line-height: 60px;
}
.circular_fiexd3 .circular3 {
  width: 50px;
  height: 50px;
  line-height: 50px;
}

.circular_fiexd5 {
  position: absolute;
  top: 35%;
  left: 38.5%;
  transition: all 0.5s ease;
  &:hover {
    transform: scale(1.1);
  }
}

.circular_fiexd6 {
  position: absolute;
  top: 47%;
  left: 41%;
  transition: all 0.5s ease;
  &:hover {
    transform: scale(1.1);
  }
}

.circular_fiexd5 .circular5 {
  width: 60px;
  height: 60px;
  line-height: 60px;
}
.circular_fiexd6 .circular6 {
  width: 50px;
  height: 50px;
  line-height: 50px;
}

.circular_fiexd7 {
  position: absolute;
  top: 47%;
  left: 45%;
  transition: all 0.5s ease;
  &:hover {
    transform: scale(1.1);
  }
}

.circular_fiexd8 {
  position: absolute;
  top: 37%;
  left: 47.5%;
  transition: all 0.5s ease;
  &:hover {
    transform: scale(1.1);
  }
}

.circular_fiexd9 {
  position: absolute;
  top: 48%;
  left: 52%;
  transition: all 0.5s ease;
  &:hover {
    transform: scale(1.1);
  }
}
.country3 .circular_fiexd9 {
  top: 11%;
  left: 6%;
}
.circular_fiexd7 .circular7 {
  width: 60px;
  height: 60px;
  line-height: 60px;
}
.circular_fiexd8 .circular8 {
  width: 50px;
  height: 50px;
  line-height: 50px;
}
.circular_fiexd9 .circular9 {
  // width: 50px;
  // height: 50px;
  // line-height: 50px;
}
.carousel_h {
  height: 569px;
}
.country3 .circular_fiexd8 {
  top: 35%;
  left: 30.5%;
}

.country3 .circular_fiexd6 {
  top: 0%;
  left: 23%;
}
.country3 .circular_fiexd7 {
  position: absolute;
  top: 16%;
  left: 2%;
}
.country3 .circular_fiexd2 {
  top: 7%;
  left: 2%;
}

.country3 .circular_fiexd2 .circular2 {
  width: 60px;
  height: 60px;
  line-height: 60px;
}
.country3 .circular_fiexd5 {
  position: absolute;
  top: 67%;
  left: 50.5%;
}

.country3 .circular_fiexd5 .circular5,
.country3 .circular_fiexd8 .circular8,
.country3 .circular_fiexd6 .circular6 {
  width: 80px;
  height: 80px;
  line-height: 80px;
}
.circular_fiexds {
  animation: move 1s ease-in infinite;
}
@keyframes move {
  from {
    transform: translateY(0);
  }
  50% {
    transform: translateY(5px);
  }
  90% {
    transform: translateY(9px);
  }
  to {
    transform: translateY(12px);
  }
}

@media (max-width: 750px) {
  .assistance_zc {
    width: 100%;
    padding: 0;
    .assistance_zc_item {
      padding: 20px 0;
      margin: 0 15px 0px;
      p {
        width: 100%;
      }
    }
  }
}
.pagination {
  width: 55%;
  margin: 40px auto 0;
}
</style>